Vue 实例和生命周期

概述

在 Vue.js 中，每个 Vue 应用都是通过创建一个 Vue 实例开始的。Vue 实例是 Vue 应用的核心，它管理着应用的数据、模板、方法和生命周期钩子。理解 Vue 实例及其生命周期是掌握 Vue.js 的基础。

创建 Vue 实例

基本结构

一个简单的 Vue 实例通常包含以下几个部分：

new Vue({
  el: '#app', // 挂载点
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

• el: 指定 Vue 实例挂载的 DOM 元素，通常是一个选择器。
• data: 存储 Vue 实例的数据对象。
• methods: 定义 Vue 实例的方法。

挂载点

挂载点是 Vue 实例与 DOM 元素的连接点。Vue 实例会接管这个 DOM 元素及其子元素，并将其内容替换为 Vue 实例的模板。

<div id="app">
  {{ message }}
</div>

在这个例子中，#app 是挂载点，Vue 实例会接管这个 div 元素。

生命周期钩子

Vue 实例在创建、更新和销毁的过程中会触发一系列的生命周期钩子。这些钩子允许你在特定阶段执行自定义逻辑。

常见的生命周期钩子

1. beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created: 在实例创建完成后被调用，此时实例已完成数据观测、属性和方法的运算，但尚未挂载到 DOM。
3. beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。
4. mounted: 在实例挂载到 DOM 后被调用，此时可以访问到 DOM 元素。
5. beforeUpdate: 在数据更新时，虚拟 DOM 重新渲染和打补丁之前被调用。
6. updated: 在数据更新后，虚拟 DOM 重新渲染和打补丁之后被调用。
7. beforeDestroy: 在实例销毁之前被调用。
8. destroyed: 在实例销毁后被调用。

示例代码

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
});

生命周期图示

实践练习

练习 1: 创建一个简单的 Vue 应用

1. 创建一个 HTML 文件，引入 Vue.js。
2. 创建一个 Vue 实例，挂载到 #app 元素。
3. 在 data 中定义一个 message 属性，并在模板中显示。
4. 在 created 钩子中输出一条消息到控制台。

练习 2: 使用生命周期钩子

1. 创建一个 Vue 实例，挂载到 #app 元素。
2. 在 data 中定义一个 count 属性，初始值为 0。
3. 在 mounted 钩子中，每秒增加 count 的值。
4. 在 beforeUpdate 和 updated 钩子中输出当前的 count 值。

总结

Vue 实例是 Vue.js 应用的核心，理解其生命周期钩子可以帮助你在应用的不同阶段执行自定义逻辑。通过实践练习，你可以更好地掌握 Vue 实例的创建和生命周期的使用。

下一步

接下来，我们将学习 Vue 的模板语法和数据绑定，这是 Vue 的核心特性之一。